<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>第 3 章 HTML 基础概念及规则 | 前端开发2020版</title>
  <meta name="description" content="掌握前端开发的基础知识" />
  <meta name="generator" content="bookdown 0.17.2 and GitBook 2.6.7" />

  <meta property="og:title" content="第 3 章 HTML 基础概念及规则 | 前端开发2020版" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="掌握前端开发的基础知识" />
  <meta name="github-repo" content="yangjh-xbmu/front-end" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="第 3 章 HTML 基础概念及规则 | 前端开发2020版" />
  
  <meta name="twitter:description" content="掌握前端开发的基础知识" />
  

<meta name="author" content="杨志宏" />



  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="webstandard.html"/>
<link rel="next" href="htmlelement.html"/>
<script src="libs/jquery-2.2.3/jquery.min.js"></script>
<link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-clipboard.css" rel="stylesheet" />











<style type="text/css">
code.sourceCode > span { display: inline-block; line-height: 1.25; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css\style.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">front-end</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>前言</a><ul>
<li class="chapter" data-level="0.1" data-path="index.html"><a href="index.html#什么是前端网络开发"><i class="fa fa-check"></i><b>0.1</b> 什么是前端网络开发</a></li>
<li class="chapter" data-level="0.2" data-path="index.html"><a href="index.html#本书的特点"><i class="fa fa-check"></i><b>0.2</b> 本书的特点</a></li>
<li class="chapter" data-level="0.3" data-path="index.html"><a href="index.html#本书的目标"><i class="fa fa-check"></i><b>0.3</b> 本书的目标</a></li>
<li class="chapter" data-level="0.4" data-path="index.html"><a href="index.html#在线阅读地址"><i class="fa fa-check"></i><b>0.4</b> 在线阅读地址</a></li>
<li class="chapter" data-level="0.5" data-path="index.html"><a href="index.html#学习资源"><i class="fa fa-check"></i><b>0.5</b> 学习资源</a><ul>
<li class="chapter" data-level="0.5.1" data-path="index.html"><a href="index.html#行业导航"><i class="fa fa-check"></i><b>0.5.1</b> 行业导航</a></li>
<li class="chapter" data-level="0.5.2" data-path="index.html"><a href="index.html#技术社区"><i class="fa fa-check"></i><b>0.5.2</b> 技术社区</a></li>
<li class="chapter" data-level="0.5.3" data-path="index.html"><a href="index.html#技术专家博客"><i class="fa fa-check"></i><b>0.5.3</b> 技术专家博客</a></li>
<li class="chapter" data-level="0.5.4" data-path="index.html"><a href="index.html#html"><i class="fa fa-check"></i><b>0.5.4</b> HTML</a></li>
<li class="chapter" data-level="0.5.5" data-path="index.html"><a href="index.html#css"><i class="fa fa-check"></i><b>0.5.5</b> CSS</a></li>
<li class="chapter" data-level="0.5.6" data-path="index.html"><a href="index.html#ui框架"><i class="fa fa-check"></i><b>0.5.6</b> UI框架</a></li>
<li class="chapter" data-level="0.5.7" data-path="index.html"><a href="index.html#javascript"><i class="fa fa-check"></i><b>0.5.7</b> JavaScript</a></li>
<li class="chapter" data-level="0.5.8" data-path="index.html"><a href="index.html#前端兼职"><i class="fa fa-check"></i><b>0.5.8</b> 前端兼职</a></li>
<li class="chapter" data-level="0.5.9" data-path="index.html"><a href="index.html#工具"><i class="fa fa-check"></i><b>0.5.9</b> 工具</a></li>
<li class="chapter" data-level="0.5.10" data-path="index.html"><a href="index.html#前端框架"><i class="fa fa-check"></i><b>0.5.10</b> 前端框架</a></li>
<li class="chapter" data-level="0.5.11" data-path="index.html"><a href="index.html#作品赏析"><i class="fa fa-check"></i><b>0.5.11</b> 作品赏析</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>I HTML</b></span></li>
<li class="chapter" data-level="1" data-path="htmlhistroy.html"><a href="htmlhistroy.html"><i class="fa fa-check"></i><b>1</b> HTML 简介</a><ul>
<li class="chapter" data-level="1.1" data-path="htmlhistroy.html"><a href="htmlhistroy.html#html-发展简史"><i class="fa fa-check"></i><b>1.1</b> HTML 发展简史</a></li>
<li class="chapter" data-level="1.2" data-path="htmlhistroy.html"><a href="htmlhistroy.html#在线学习资源及工具"><i class="fa fa-check"></i><b>1.2</b> 在线学习资源及工具</a></li>
<li class="chapter" data-level="1.3" data-path="htmlhistroy.html"><a href="htmlhistroy.html#扩展阅读资料"><i class="fa fa-check"></i><b>1.3</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="2" data-path="webstandard.html"><a href="webstandard.html"><i class="fa fa-check"></i><b>2</b> Web 标准</a><ul>
<li class="chapter" data-level="2.1" data-path="webstandard.html"><a href="webstandard.html#web-标准产生背景"><i class="fa fa-check"></i><b>2.1</b> Web 标准产生背景</a></li>
<li class="chapter" data-level="2.2" data-path="webstandard.html"><a href="webstandard.html#web-标准的内容"><i class="fa fa-check"></i><b>2.2</b> Web 标准的内容</a></li>
<li class="chapter" data-level="2.3" data-path="webstandard.html"><a href="webstandard.html#扩展阅读材料"><i class="fa fa-check"></i><b>2.3</b> 扩展阅读材料</a></li>
</ul></li>
<li class="chapter" data-level="3" data-path="HTMLterm.html"><a href="HTMLterm.html"><i class="fa fa-check"></i><b>3</b> HTML 基础概念及规则</a><ul>
<li class="chapter" data-level="3.1" data-path="HTMLterm.html"><a href="HTMLterm.html#html-基本结构"><i class="fa fa-check"></i><b>3.1</b> HTML 基本结构</a></li>
<li class="chapter" data-level="3.2" data-path="HTMLterm.html"><a href="HTMLterm.html#元素及标签"><i class="fa fa-check"></i><b>3.2</b> 元素及标签</a></li>
<li class="chapter" data-level="3.3" data-path="HTMLterm.html"><a href="HTMLterm.html#属性及属性值"><i class="fa fa-check"></i><b>3.3</b> 属性及属性值</a></li>
<li class="chapter" data-level="3.4" data-path="HTMLterm.html"><a href="HTMLterm.html#特殊字符"><i class="fa fa-check"></i><b>3.4</b> 特殊字符</a></li>
<li class="chapter" data-level="3.5" data-path="HTMLterm.html"><a href="HTMLterm.html#扩展阅读资料-1"><i class="fa fa-check"></i><b>3.5</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="htmlelement.html"><a href="htmlelement.html"><i class="fa fa-check"></i><b>4</b> <code>html</code>元素</a></li>
<li class="chapter" data-level="5" data-path="html-meta.html"><a href="html-meta.html"><i class="fa fa-check"></i><b>5</b> 文档元数据相关元素</a><ul>
<li class="chapter" data-level="5.1" data-path="html-meta.html"><a href="html-meta.html#head"><i class="fa fa-check"></i><b>5.1</b> head</a></li>
<li class="chapter" data-level="5.2" data-path="html-meta.html"><a href="html-meta.html#title"><i class="fa fa-check"></i><b>5.2</b> title</a></li>
<li class="chapter" data-level="5.3" data-path="html-meta.html"><a href="html-meta.html#base"><i class="fa fa-check"></i><b>5.3</b> base</a></li>
<li class="chapter" data-level="5.4" data-path="html-meta.html"><a href="html-meta.html#link"><i class="fa fa-check"></i><b>5.4</b> link</a></li>
<li class="chapter" data-level="5.5" data-path="html-meta.html"><a href="html-meta.html#meta"><i class="fa fa-check"></i><b>5.5</b> meta</a></li>
<li class="chapter" data-level="5.6" data-path="html-meta.html"><a href="html-meta.html#扩展阅读资料-2"><i class="fa fa-check"></i><b>5.6</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="html-sections.html"><a href="html-sections.html"><i class="fa fa-check"></i><b>6</b> 区块元素</a><ul>
<li class="chapter" data-level="6.1" data-path="html-sections.html"><a href="html-sections.html#块元素与行内元素"><i class="fa fa-check"></i><b>6.1</b> 块元素与行内元素</a></li>
<li class="chapter" data-level="6.2" data-path="html-sections.html"><a href="html-sections.html#区块元素"><i class="fa fa-check"></i><b>6.2</b> 区块元素</a><ul>
<li class="chapter" data-level="6.2.1" data-path="html-sections.html"><a href="html-sections.html#body"><i class="fa fa-check"></i><b>6.2.1</b> body</a></li>
<li class="chapter" data-level="6.2.2" data-path="html-sections.html"><a href="html-sections.html#article"><i class="fa fa-check"></i><b>6.2.2</b> article</a></li>
<li class="chapter" data-level="6.2.3" data-path="html-sections.html"><a href="html-sections.html#section"><i class="fa fa-check"></i><b>6.2.3</b> section</a></li>
<li class="chapter" data-level="6.2.4" data-path="html-sections.html"><a href="html-sections.html#nav"><i class="fa fa-check"></i><b>6.2.4</b> nav</a></li>
<li class="chapter" data-level="6.2.5" data-path="html-sections.html"><a href="html-sections.html#aside"><i class="fa fa-check"></i><b>6.2.5</b> aside</a></li>
<li class="chapter" data-level="6.2.6" data-path="html-sections.html"><a href="html-sections.html#h1h2h6"><i class="fa fa-check"></i><b>6.2.6</b> h1,h2,…h6</a></li>
<li class="chapter" data-level="6.2.7" data-path="html-sections.html"><a href="html-sections.html#header"><i class="fa fa-check"></i><b>6.2.7</b> header</a></li>
<li class="chapter" data-level="6.2.8" data-path="html-sections.html"><a href="html-sections.html#footer"><i class="fa fa-check"></i><b>6.2.8</b> footer</a></li>
</ul></li>
<li class="chapter" data-level="6.3" data-path="html-sections.html"><a href="html-sections.html#扩展阅读资料-3"><i class="fa fa-check"></i><b>6.3</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="html-group.html"><a href="html-group.html"><i class="fa fa-check"></i><b>7</b> 内容组织元素</a><ul>
<li class="chapter" data-level="7.1" data-path="html-group.html"><a href="html-group.html#内容组织相关元素"><i class="fa fa-check"></i><b>7.1</b> 内容组织相关元素</a><ul>
<li class="chapter" data-level="7.1.1" data-path="html-group.html"><a href="html-group.html#p"><i class="fa fa-check"></i><b>7.1.1</b> p</a></li>
<li class="chapter" data-level="7.1.2" data-path="html-group.html"><a href="html-group.html#address"><i class="fa fa-check"></i><b>7.1.2</b> address</a></li>
<li class="chapter" data-level="7.1.3" data-path="html-group.html"><a href="html-group.html#hr"><i class="fa fa-check"></i><b>7.1.3</b> hr</a></li>
<li class="chapter" data-level="7.1.4" data-path="html-group.html"><a href="html-group.html#pre"><i class="fa fa-check"></i><b>7.1.4</b> pre</a></li>
<li class="chapter" data-level="7.1.5" data-path="html-group.html"><a href="html-group.html#blockquote"><i class="fa fa-check"></i><b>7.1.5</b> blockquote</a></li>
<li class="chapter" data-level="7.1.6" data-path="html-group.html"><a href="html-group.html#ol"><i class="fa fa-check"></i><b>7.1.6</b> ol</a></li>
<li class="chapter" data-level="7.1.7" data-path="html-group.html"><a href="html-group.html#ul"><i class="fa fa-check"></i><b>7.1.7</b> ul</a></li>
<li class="chapter" data-level="7.1.8" data-path="html-group.html"><a href="html-group.html#li"><i class="fa fa-check"></i><b>7.1.8</b> li</a></li>
<li class="chapter" data-level="7.1.9" data-path="html-group.html"><a href="html-group.html#dl"><i class="fa fa-check"></i><b>7.1.9</b> dl</a></li>
<li class="chapter" data-level="7.1.10" data-path="html-group.html"><a href="html-group.html#dt"><i class="fa fa-check"></i><b>7.1.10</b> dt</a></li>
<li class="chapter" data-level="7.1.11" data-path="html-group.html"><a href="html-group.html#dd"><i class="fa fa-check"></i><b>7.1.11</b> dd</a></li>
<li class="chapter" data-level="7.1.12" data-path="html-group.html"><a href="html-group.html#figure"><i class="fa fa-check"></i><b>7.1.12</b> figure</a></li>
<li class="chapter" data-level="7.1.13" data-path="html-group.html"><a href="html-group.html#figcaption"><i class="fa fa-check"></i><b>7.1.13</b> figcaption</a></li>
<li class="chapter" data-level="7.1.14" data-path="html-group.html"><a href="html-group.html#main"><i class="fa fa-check"></i><b>7.1.14</b> main</a></li>
<li class="chapter" data-level="7.1.15" data-path="html-group.html"><a href="html-group.html#div"><i class="fa fa-check"></i><b>7.1.15</b> div</a></li>
</ul></li>
<li class="chapter" data-level="7.2" data-path="html-group.html"><a href="html-group.html#扩展阅读资料-4"><i class="fa fa-check"></i><b>7.2</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="html-text.html"><a href="html-text.html"><i class="fa fa-check"></i><b>8</b> 文本语义元素</a><ul>
<li class="chapter" data-level="8.1" data-path="html-text.html"><a href="html-text.html#a"><i class="fa fa-check"></i><b>8.1</b> a</a></li>
<li class="chapter" data-level="8.2" data-path="html-text.html"><a href="html-text.html#em"><i class="fa fa-check"></i><b>8.2</b> em</a></li>
<li class="chapter" data-level="8.3" data-path="html-text.html"><a href="html-text.html#strong"><i class="fa fa-check"></i><b>8.3</b> strong</a></li>
<li class="chapter" data-level="8.4" data-path="html-text.html"><a href="html-text.html#small"><i class="fa fa-check"></i><b>8.4</b> small</a></li>
<li class="chapter" data-level="8.5" data-path="html-text.html"><a href="html-text.html#s"><i class="fa fa-check"></i><b>8.5</b> s</a></li>
<li class="chapter" data-level="8.6" data-path="html-text.html"><a href="html-text.html#cite"><i class="fa fa-check"></i><b>8.6</b> cite</a></li>
<li class="chapter" data-level="8.7" data-path="html-text.html"><a href="html-text.html#q"><i class="fa fa-check"></i><b>8.7</b> q</a></li>
<li class="chapter" data-level="8.8" data-path="html-text.html"><a href="html-text.html#dfn"><i class="fa fa-check"></i><b>8.8</b> dfn</a></li>
<li class="chapter" data-level="8.9" data-path="html-text.html"><a href="html-text.html#abbr"><i class="fa fa-check"></i><b>8.9</b> abbr</a></li>
<li class="chapter" data-level="8.10" data-path="html-text.html"><a href="html-text.html#data"><i class="fa fa-check"></i><b>8.10</b> data</a></li>
<li class="chapter" data-level="8.11" data-path="html-text.html"><a href="html-text.html#time"><i class="fa fa-check"></i><b>8.11</b> time</a></li>
<li class="chapter" data-level="8.12" data-path="html-text.html"><a href="html-text.html#code"><i class="fa fa-check"></i><b>8.12</b> code</a></li>
<li class="chapter" data-level="8.13" data-path="html-text.html"><a href="html-text.html#var"><i class="fa fa-check"></i><b>8.13</b> var</a></li>
<li class="chapter" data-level="8.14" data-path="html-text.html"><a href="html-text.html#samp"><i class="fa fa-check"></i><b>8.14</b> samp</a></li>
<li class="chapter" data-level="8.15" data-path="html-text.html"><a href="html-text.html#kbd"><i class="fa fa-check"></i><b>8.15</b> kbd</a></li>
<li class="chapter" data-level="8.16" data-path="html-text.html"><a href="html-text.html#sub-和-sup"><i class="fa fa-check"></i><b>8.16</b> sub 和 sup</a></li>
<li class="chapter" data-level="8.17" data-path="html-text.html"><a href="html-text.html#i"><i class="fa fa-check"></i><b>8.17</b> i</a></li>
<li class="chapter" data-level="8.18" data-path="html-text.html"><a href="html-text.html#b"><i class="fa fa-check"></i><b>8.18</b> b</a></li>
<li class="chapter" data-level="8.19" data-path="html-text.html"><a href="html-text.html#u"><i class="fa fa-check"></i><b>8.19</b> u</a></li>
<li class="chapter" data-level="8.20" data-path="html-text.html"><a href="html-text.html#mark"><i class="fa fa-check"></i><b>8.20</b> mark</a></li>
<li class="chapter" data-level="8.21" data-path="html-text.html"><a href="html-text.html#ruby"><i class="fa fa-check"></i><b>8.21</b> ruby</a></li>
<li class="chapter" data-level="8.22" data-path="html-text.html"><a href="html-text.html#span"><i class="fa fa-check"></i><b>8.22</b> span</a></li>
<li class="chapter" data-level="8.23" data-path="html-text.html"><a href="html-text.html#br"><i class="fa fa-check"></i><b>8.23</b> br</a></li>
<li class="chapter" data-level="8.24" data-path="html-text.html"><a href="html-text.html#扩展阅读资料-5"><i class="fa fa-check"></i><b>8.24</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="html-edit.html"><a href="html-edit.html"><i class="fa fa-check"></i><b>9</b> 编辑相关元素</a><ul>
<li class="chapter" data-level="9.1" data-path="html-edit.html"><a href="html-edit.html#ins"><i class="fa fa-check"></i><b>9.1</b> ins</a></li>
<li class="chapter" data-level="9.2" data-path="html-edit.html"><a href="html-edit.html#del"><i class="fa fa-check"></i><b>9.2</b> del</a></li>
<li class="chapter" data-level="9.3" data-path="html-edit.html"><a href="html-edit.html#扩展阅读资料-6"><i class="fa fa-check"></i><b>9.3</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="html-embed.html"><a href="html-embed.html"><i class="fa fa-check"></i><b>10</b> 嵌入内容元素</a><ul>
<li class="chapter" data-level="10.1" data-path="html-embed.html"><a href="html-embed.html#picture"><i class="fa fa-check"></i><b>10.1</b> picture</a></li>
<li class="chapter" data-level="10.2" data-path="html-embed.html"><a href="html-embed.html#img"><i class="fa fa-check"></i><b>10.2</b> img</a></li>
<li class="chapter" data-level="10.3" data-path="html-embed.html"><a href="html-embed.html#iframe"><i class="fa fa-check"></i><b>10.3</b> iframe</a></li>
<li class="chapter" data-level="10.4" data-path="html-embed.html"><a href="html-embed.html#embed"><i class="fa fa-check"></i><b>10.4</b> embed</a><ul>
<li class="chapter" data-level="10.4.1" data-path="html-embed.html"><a href="html-embed.html#嵌入-flash"><i class="fa fa-check"></i><b>10.4.1</b> 嵌入 flash</a></li>
<li class="chapter" data-level="10.4.2" data-path="html-embed.html"><a href="html-embed.html#嵌入视频平台的内容"><i class="fa fa-check"></i><b>10.4.2</b> 嵌入视频平台的内容</a></li>
</ul></li>
<li class="chapter" data-level="10.5" data-path="html-embed.html"><a href="html-embed.html#object"><i class="fa fa-check"></i><b>10.5</b> object</a></li>
<li class="chapter" data-level="10.6" data-path="html-embed.html"><a href="html-embed.html#video"><i class="fa fa-check"></i><b>10.6</b> video</a></li>
<li class="chapter" data-level="10.7" data-path="html-embed.html"><a href="html-embed.html#audio"><i class="fa fa-check"></i><b>10.7</b> audio</a><ul>
<li class="chapter" data-level="10.7.1" data-path="html-embed.html"><a href="html-embed.html#设置音频播放属性"><i class="fa fa-check"></i><b>10.7.1</b> 设置音频播放属性</a></li>
<li class="chapter" data-level="10.7.2" data-path="html-embed.html"><a href="html-embed.html#指定多种音频格式"><i class="fa fa-check"></i><b>10.7.2</b> 指定多种音频格式</a></li>
</ul></li>
<li class="chapter" data-level="10.8" data-path="html-embed.html"><a href="html-embed.html#source"><i class="fa fa-check"></i><b>10.8</b> source</a></li>
<li class="chapter" data-level="10.9" data-path="html-embed.html"><a href="html-embed.html#track"><i class="fa fa-check"></i><b>10.9</b> track</a></li>
<li class="chapter" data-level="10.10" data-path="html-embed.html"><a href="html-embed.html#map"><i class="fa fa-check"></i><b>10.10</b> map</a></li>
<li class="chapter" data-level="10.11" data-path="html-embed.html"><a href="html-embed.html#area"><i class="fa fa-check"></i><b>10.11</b> area</a></li>
<li class="chapter" data-level="10.12" data-path="html-embed.html"><a href="html-embed.html#math"><i class="fa fa-check"></i><b>10.12</b> math</a></li>
<li class="chapter" data-level="10.13" data-path="html-embed.html"><a href="html-embed.html#svg"><i class="fa fa-check"></i><b>10.13</b> svg</a></li>
<li class="chapter" data-level="10.14" data-path="html-embed.html"><a href="html-embed.html#扩展阅读资料-7"><i class="fa fa-check"></i><b>10.14</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="11" data-path="html-table.html"><a href="html-table.html"><i class="fa fa-check"></i><b>11</b> 表格元素</a><ul>
<li class="chapter" data-level="11.1" data-path="html-table.html"><a href="html-table.html#table"><i class="fa fa-check"></i><b>11.1</b> table</a></li>
<li class="chapter" data-level="11.2" data-path="html-table.html"><a href="html-table.html#caption"><i class="fa fa-check"></i><b>11.2</b> caption</a></li>
<li class="chapter" data-level="11.3" data-path="html-table.html"><a href="html-table.html#tbody"><i class="fa fa-check"></i><b>11.3</b> tbody</a></li>
<li class="chapter" data-level="11.4" data-path="html-table.html"><a href="html-table.html#thead"><i class="fa fa-check"></i><b>11.4</b> thead</a></li>
<li class="chapter" data-level="11.5" data-path="html-table.html"><a href="html-table.html#tfoot"><i class="fa fa-check"></i><b>11.5</b> tfoot</a></li>
<li class="chapter" data-level="11.6" data-path="html-table.html"><a href="html-table.html#tr"><i class="fa fa-check"></i><b>11.6</b> tr</a></li>
<li class="chapter" data-level="11.7" data-path="html-table.html"><a href="html-table.html#td"><i class="fa fa-check"></i><b>11.7</b> td</a></li>
<li class="chapter" data-level="11.8" data-path="html-table.html"><a href="html-table.html#th"><i class="fa fa-check"></i><b>11.8</b> th</a></li>
<li class="chapter" data-level="11.9" data-path="html-table.html"><a href="html-table.html#扩展阅读资料-8"><i class="fa fa-check"></i><b>11.9</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="12" data-path="html-form.html"><a href="html-form.html"><i class="fa fa-check"></i><b>12</b> 表单元素</a><ul>
<li class="chapter" data-level="12.1" data-path="html-form.html"><a href="html-form.html#form"><i class="fa fa-check"></i><b>12.1</b> form</a></li>
<li class="chapter" data-level="12.2" data-path="html-form.html"><a href="html-form.html#lable"><i class="fa fa-check"></i><b>12.2</b> lable</a></li>
<li class="chapter" data-level="12.3" data-path="html-form.html"><a href="html-form.html#input"><i class="fa fa-check"></i><b>12.3</b> input</a></li>
<li class="chapter" data-level="12.4" data-path="html-form.html"><a href="html-form.html#button"><i class="fa fa-check"></i><b>12.4</b> button</a></li>
<li class="chapter" data-level="12.5" data-path="html-form.html"><a href="html-form.html#select"><i class="fa fa-check"></i><b>12.5</b> select</a></li>
<li class="chapter" data-level="12.6" data-path="html-form.html"><a href="html-form.html#datalist"><i class="fa fa-check"></i><b>12.6</b> datalist</a></li>
<li class="chapter" data-level="12.7" data-path="html-form.html"><a href="html-form.html#optgroup"><i class="fa fa-check"></i><b>12.7</b> optgroup</a></li>
<li class="chapter" data-level="12.8" data-path="html-form.html"><a href="html-form.html#option"><i class="fa fa-check"></i><b>12.8</b> option</a></li>
<li class="chapter" data-level="12.9" data-path="html-form.html"><a href="html-form.html#textarea"><i class="fa fa-check"></i><b>12.9</b> textarea</a></li>
<li class="chapter" data-level="12.10" data-path="html-form.html"><a href="html-form.html#keygen"><i class="fa fa-check"></i><b>12.10</b> keygen</a></li>
<li class="chapter" data-level="12.11" data-path="html-form.html"><a href="html-form.html#output"><i class="fa fa-check"></i><b>12.11</b> output</a></li>
<li class="chapter" data-level="12.12" data-path="html-form.html"><a href="html-form.html#progress"><i class="fa fa-check"></i><b>12.12</b> progress</a></li>
<li class="chapter" data-level="12.13" data-path="html-form.html"><a href="html-form.html#meter"><i class="fa fa-check"></i><b>12.13</b> meter</a></li>
<li class="chapter" data-level="12.14" data-path="html-form.html"><a href="html-form.html#filedset"><i class="fa fa-check"></i><b>12.14</b> filedset</a></li>
<li class="chapter" data-level="12.15" data-path="html-form.html"><a href="html-form.html#legend"><i class="fa fa-check"></i><b>12.15</b> legend</a></li>
<li class="chapter" data-level="12.16" data-path="html-form.html"><a href="html-form.html#扩展阅读资料-9"><i class="fa fa-check"></i><b>12.16</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="13" data-path="html-script.html"><a href="html-script.html"><i class="fa fa-check"></i><b>13</b> 脚本元素</a><ul>
<li class="chapter" data-level="13.1" data-path="html-script.html"><a href="html-script.html#script"><i class="fa fa-check"></i><b>13.1</b> script</a></li>
<li class="chapter" data-level="13.2" data-path="html-script.html"><a href="html-script.html#noscript"><i class="fa fa-check"></i><b>13.2</b> noscript</a></li>
<li class="chapter" data-level="13.3" data-path="html-script.html"><a href="html-script.html#template"><i class="fa fa-check"></i><b>13.3</b> template</a></li>
<li class="chapter" data-level="13.4" data-path="html-script.html"><a href="html-script.html#canvas"><i class="fa fa-check"></i><b>13.4</b> canvas</a></li>
<li class="chapter" data-level="13.5" data-path="html-script.html"><a href="html-script.html#扩展阅读资料-10"><i class="fa fa-check"></i><b>13.5</b> 扩展阅读资料</a></li>
</ul></li>
<li class="divider"></li>
<li><a href="https://bookdown.org" target="blank">本书由 bookdown 强力驱动</a></li>

</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">前端开发2020版</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="HTMLterm" class="section level1">
<h1><span class="header-section-number">第 3 章</span> HTML 基础概念及规则</h1>
<div id="html-基本结构" class="section level2">
<h2><span class="header-section-number">3.1</span> HTML 基本结构</h2>
<p>HTML 文件后缀名为“<code>.htm</code>”或“<code>.html</code>”，是一种包含了 HTML 标记的文本文件，我们通常所说的网页实质上就是 HTML 文件，HTML 的编辑非常简单，学习成本很低，而且所有网页的源代码都可通过浏览器直接查看。正如蒂姆·伯纳斯－李所说：“（互联网）起飞原因在于，全球的人可随意融入参与。”</p>
<p>创建网页的方式有很多，我们可以新建一个空白的文本文件，编辑之后保存为后缀名为“<code>.html</code>”的文件即可。如：</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a href="HTMLterm.html#cb1-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb1-2"><a href="HTMLterm.html#cb1-2"></a><span class="kw">&lt;html&gt;</span></span>
<span id="cb1-3"><a href="HTMLterm.html#cb1-3"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb1-4"><a href="HTMLterm.html#cb1-4"></a>  <span class="kw">&lt;meta</span><span class="ot"> charset=</span><span class="st">&quot;utf-8&quot;</span> <span class="kw">/&gt;</span></span>
<span id="cb1-5"><a href="HTMLterm.html#cb1-5"></a>  <span class="kw">&lt;title&gt;</span>文档标题<span class="kw">&lt;/title&gt;</span></span>
<span id="cb1-6"><a href="HTMLterm.html#cb1-6"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb1-7"><a href="HTMLterm.html#cb1-7"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb1-8"><a href="HTMLterm.html#cb1-8"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb1-9"><a href="HTMLterm.html#cb1-9"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<p>在上面的 HTML 文件中我们可以看出，HTML 文档可以分为文档声明、网页头部分和网页主体部分三部分。</p>
<p>网页头部分指的是<code>&lt;head&gt;</code>和<code>&lt;/head&gt;</code>部分，在这个区域一般放置网页相关的内容，比如网页编码方式、关键词、网页内容描述和网页相关联的文件等等。这些包含在<code>&lt;head&gt;</code>和<code>&lt;/head&gt;</code>之间的内容一般不会显示在用户的浏览器中。</p>
<p>网页主体部分指的是包含在<code>&lt;body&gt;</code>和<code>&lt;/body&gt;</code>之间的部分，这部分内容是显示在浏览器中的内容，大部分 HTML 的编辑工作都是在主体部分中完成，如图片、文字、超链接等等。</p>
<p>头部分和主体部分又包含在<code>&lt;html&gt;</code>和<code>&lt;/html&gt;</code>之中。浏览器会把<code>&lt;html&gt;</code>和<code>&lt;/html&gt;</code>之中的内容视为网页。</p>
</div>
<div id="元素及标签" class="section level2">
<h2><span class="header-section-number">3.2</span> 元素及标签</h2>
<p>元素是构成网页内容的基础单位，元素由起始标签、内容和结束标签构成，如：</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a href="HTMLterm.html#cb2-1"></a><span class="kw">&lt;h1&gt;</span>一级标题<span class="kw">&lt;/h1&gt;</span></span></code></pre></div>
<p>其中<code>&lt;h1&gt;</code>是<code>h1</code>元素的起始标签，标签以“<code>&lt;</code>”开始，以“<code>&gt;</code>”结束，<code>&lt;/h1&gt;</code>是结束标签，结束标签中含有“<code>/</code>”，位于起始标签和结束标签之间的“一级标题”是<code>h1</code>元素标记的内容。</p>
<p>元素可以嵌套，比如在段落 p 中插入图片<code>img</code>。这时，<code>img</code>元素作为整体构成段落元素<code>p</code>的内容。</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb3-1"><a href="HTMLterm.html#cb3-1"></a><span class="kw">&lt;p&gt;</span></span>
<span id="cb3-2"><a href="HTMLterm.html#cb3-2"></a>  <span class="kw">&lt;img</span><span class="ot"> src=</span><span class="st">&quot;http://img1.gtimg.com/63530531.jpg&quot;</span> <span class="kw">/&gt;</span></span>
<span id="cb3-3"><a href="HTMLterm.html#cb3-3"></a><span class="kw">&lt;/p&gt;</span></span></code></pre></div>
<p>并非所有元素都包含起始标签和结束标签。如上例中，<code>img</code>元素就只有一个起始标签，没有结束标签，这一类元素被称为自闭和元素。除<code>img</code>元素之外，常见的自闭和元素还有：<code>&lt;br&gt;、&lt;embed&gt;、&lt;hr&gt;、&lt;input&gt;、&lt;link&gt;、&lt;meta&gt;、&lt;source&gt;、&lt;wbr&gt;</code>。</p>
</div>
<div id="属性及属性值" class="section level2">
<h2><span class="header-section-number">3.3</span> 属性及属性值</h2>
<p>属性（Attributes）及其值（Values）对于某些元素而言是必不可少的，比如新闻网页中经常使用图片来传递信息，图片在 HTML 中使用<code>img</code>元素来标记，但必须使用相应的属性及其值，告诉浏览器图片存放的位置、图片的大小等信息，其中图片存放的位置用<code>src</code>属性来表示，而图片的大小用 width 和 height 属性来表示，属性的值为字符串。如：</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb4-1"><a href="HTMLterm.html#cb4-1"></a><span class="kw">&lt;img</span><span class="ot"> src=</span><span class="st">&quot;63530531.jpg&quot;</span><span class="ot"> alt=</span><span class="st">&quot;一周图片精选&quot;</span><span class="kw">&gt;</span></span></code></pre></div>
<p>上例中，<code>img</code>元素拥有<code>src</code>属性，表示图片来源，<code>src</code>属性的值为<code>63530531.jpg</code>，表示图片存放的具体位置。</p>
<p>以下属性是全局属性，即几乎所有 HTML 元素都支持的属性：</p>
<ol style="list-style-type: decimal">
<li><strong>accesskey</strong> 为元素指定快捷键</li>
<li><strong>class</strong> 为元素指定类型</li>
<li><strong>contenteditable</strong> 指定元素内容的可编辑性</li>
<li><strong>dir</strong> 指定元素内容的文字方向</li>
<li><strong>hidden</strong> 指定元素的可见性</li>
<li><strong>id</strong> 为元素指定唯一名称</li>
<li><strong>lang</strong> 指定元素内容的语言</li>
<li><strong>spellcheck</strong> 为元素指定拼写检查</li>
<li><strong>style</strong> 为元素指定样式</li>
<li><strong>tabindex</strong> 为元素指定 tab 顺序</li>
<li><strong>title</strong> 为元素指定提示文字</li>
<li><strong>translate</strong> 为元素内容提供指定语言的翻译内容</li>
</ol>
</div>
<div id="特殊字符" class="section level2">
<h2><span class="header-section-number">3.4</span> 特殊字符</h2>
<p>HTML 中，大于号<code>&gt;</code>、小于号<code>&lt;</code>、引号<code>"</code>等一些字符，是有特殊意义的，比如 HTML 的标签就是以<code>&lt;</code>开始，以<code>&gt;</code>结束，如果直接使用，容易引起歧义。因此，HTML 中提供了输出特殊字符的机制，使用<code>&amp;</code>字符开始，以<code>;</code>结束，可以用来输出特殊字符，在<code>&amp;</code>字符和<code>;</code>之间，可以是名词或者数字编码。例如：<code>&amp;#34;</code>ˇ
表示引号。完整的 HTML 转义字符列表参见 <a href="http://tool.oschina.net/commons?type=2">http://tool.oschina.net/commons?type=2</a>。</p>
</div>
<div id="扩展阅读资料-1" class="section level2">
<h2><span class="header-section-number">3.5</span> 扩展阅读资料</h2>
<ol style="list-style-type: decimal">
<li><a href="https://www.w3.org/TR/2017/REC-html52-20171214/dom.html#dom" class="uri">https://www.w3.org/TR/2017/REC-html52-20171214/dom.html#dom</a></li>
</ol>

</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="webstandard.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="htmlelement.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
<script src="libs/gitbook-2.6.7/js/lunr.js"></script>
<script src="libs/gitbook-2.6.7/js/clipboard.min.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": true,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": ["facebook", "twitter", "linkedin", "weibo", "instapaper"]
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/yangjh-xbmu/front-end/edit/master/0102-HTML-term.Rmd",
"text": "编辑"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": ["front-end.pdf", "front-end.epub"],
"toc": {
"collapse": "section"
}
});
});
</script>

</body>

</html>
